<template>
  <div style="position: fixed;top: 0px;left: 0px;bottom: 0px;right: 0px;">


    <template  v-if="$store.state.isMobile">
<!--      style="background: #1890fe;"-->
      <div style="position: fixed;top: 50%;left: 0px;z-index: 9;width: 1rem;margin-top: -0.5rem;">
        <img src="../assets1/er/h5/icon.png" style="width: 100%;" @click="lunBo(1)"/>
      </div>
      <div style="position: fixed;top: 50%;right: 0px;z-index: 9;width: 1rem;margin-top: -0.5rem;">
        <img src="../assets1/er/h5/icon1.png" style="width: 100%;" @click="lunBo(2)"/>
      </div>
      <van-swipe class="my-swipe"  indicator-color="white" ref="lunBo">
        <van-swipe-item v-for="(item,index) in h5ImgList" :key="index">
          <img style="width:100%;" :src="item" />
        </van-swipe-item>

        <template #indicator>
          <div class="custom-indicator" style="display: none;">{{  1 }}/4</div>
        </template>
      </van-swipe>
    </template>

    <div v-else class="bg">
      <Carousel v-model="value1" loop style="height: 100%;width: 100%;" dots="none">
        <CarouselItem v-for="(item,index) in h5ImgList" :key="index">
          <div style="height: 100%;width: 100%;">
            <img style="height: 100%;" :src="item" />
          </div>
        </CarouselItem>
      </Carousel>
    </div>

    <returnIndex :isPhone="$store.state.isMobile"></returnIndex>
  </div>
</template>
<script>
import returnIndex from "@/components/return.vue";
export default {
  components: {
    returnIndex,//返回首页
  },
  data() {
    return {
      value1: 0,
      h5ImgList:[
        require("../assets1/er/h5/因美纳.jpg"),
        require("../assets1/er/h5/勤好.jpg"),
        require("../assets1/er/h5/美餐.png"),
        require("../assets1/er/h5/GSK.jpeg"),
        require("../assets1/er/h5/正大天晴.jpg"),
        require("../assets1/er/h5/科进.jpeg"),
        require("../assets1/er/h5/璞睿.jpg"),
        require("../assets1/er/h5/人保.jpg"),
        require("../assets1/er/h5/稳健.jpg"),
        // require("../assets1/er/h5/迈瑞.jpg"),
        require("../assets1/er/h5/雅培.jpg"),
        // require("../assets1/er/h5/人民日报.jpg"),
        require("../assets1/er/h5/扬子江.jpg"),
        require("../assets1/er/h5/壹永.jpeg"),
        // require("../assets1/er/h5/上海孚视.jpg"),
        require("../assets1/er/h5/天江.jpeg"),
      ]
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  methods: {//执行的方法
    lunBo(type){
      let that = this;
      if(type == 1){
        that.$refs.lunBo.prev();
      }else{
        that.$refs.lunBo.next();
      }
    }

  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style scoped lang="scss">
.bg {
  //background-image: url(../assets1/pc_know.jpg);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  //background-size: cover;
  overflow: hidden;

}

.my-swipe{
  height: 100%;

}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  overflow: auto;
}


.my-swipe .van-swipe-item::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

</style>
<style lang="scss">
.ivu-carousel-list{
  width: 100%;height: 100%;
  .ivu-carousel-track{
    height: 100%;
  }
  .ivu-carousel-item{
    height: 100%!important;
  }
}
</style>
